.ChatSongsList {
  height: 100%;
  background-color: var(--background-color-white);
  border-radius: 1rem 1rem 0 0;
  overflow: auto;
  display: flex;
  flex-direction: column;

  .song-head {
    padding: 1rem 1rem 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    cursor: pointer;
    color: var(--text-color-gray);

    > h4 {
      font-size: 4cqw;
      padding-bottom: 0.5rem;
    }

    > .active {
      color: var(--text-color);
    }
  }

  .swiper-container {
    width: 100%;
    flex: 1;
  }


  .song-list-div, .search-div {
    height: 100%;
    display: flex;
    flex-direction: column;

    .inputIcon {
      margin: 1rem;
    }

    .song-ul {
      padding: 1rem;
      flex: 1;
      overflow: auto;
    }
  }

  .song-ul {
    overflow: hidden;
    width: 100%;

    > .activity {
      background-color: var(--background-color--gray);
    }

    > li {
      margin-bottom: 1rem;
      box-shadow: 0 0 0.6rem -0.2rem var(--shadow-color);
      transition: 0.3s;

      .song-li {
        display: flex;
        aspect-ratio: 5;
        border-radius: 1cqw;
        cursor: pointer;
        overflow: hidden;
        box-shadow: 0 0 0.6rem -0.2rem var(--shadow-color);

        .picUrl {
          height: 100%;
          border-radius: 1cqw;
          box-shadow: 0.2rem 0 0.6rem -0.2rem var(--shadow-color);
        }

        > div:nth-child(2) {
          flex: 1;
          padding: 0 2cqw;
          font-size: 4cqw;

          > div {
            color: var(--text-color-gray);
            text-align: right;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .living-icon {
              width: 4cqw;

              .living-icon-col {
                background-color: var(--red-40);
              }
            }
          }
        }


      }

      &:hover {
        background-color: var(--gold-10);
        .song-ul-btn{
          height: 10cqw;
        }
      }

      .song-ul-btn {
        display: flex;
        justify-content: space-around;
        align-items: center;
        overflow: hidden;
        transition: 0.3s;
        height: 0;

        button {
          width: 40%;
          height: 7cqw;
          font-size: 2cqw;
        }
      }
    }


  }

}